<template>
    <div id="collectTerm">
        <div class="listcontent">
            <div v-for="(item,index) in grouplists" :key="item.cname" class="list">
                <p class="bgr"></p>
                <div class="listdetail">
                    <el-collapse>
                        <el-collapse-item name="1">
                            <template slot="title">
                                <div class="operate">
                                    <p>{{item.cname}}</p>
                                </div>
                            </template>
                            <div class="receiveitem" v-for="(list,indexs) in grouplists[index].termLists" :key="list.cname">
                                <div class="userinfo">
                                    <div class="cardinfo">
                                        <i><img :src="baseUrl.baseUrl+list.cplogo"></i>
                                        <p>{{list.cname}}</p>
                                    </div>
                                    <div class="tjs">
                                        <p class="operateDetail" @click="beforeRec(list.icardid,list.icarduid)"><i class="iconfont icon-pengyou"></i><span>推荐</span></p>
                                        <p class="operateDetail" @click="beforeEx(list.icardid,list.icarduid)"><i class="iconfont icon-zhuanhuan"></i><span>交换</span></p>
                                        <p @click="beforeRem(list,grouplists[index].termLists)" class="operateDetail"><i class="iconfont icon-yiguanzhu"></i><span>已收藏</span></p>
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="operateP">
                        <p class="operateDetail" @click="beforeInc(item.id,index)"><i class="iconfont icon-bianji"></i><span>导入</span></p>
                        <p class="operateDetail" @click="beforeDel(item)"><i class="iconfont icon-icon_delete"></i><span>删除</span></p>
                    </div>
                </div>
            </div>
        </div>
        <footer @click="dialogVisible = true">创建分组</footer>
        <!-- 创建提示框 -->
        <el-dialog
            id="tosure"
            :visible.sync="dialogVisible"
            width="80%"
            style="margin-top:15vh">
            <el-input v-model="inputval" placeholder="请输入标题"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="toCreateGroup">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 创建提示框结束 -->
        <!-- 删除提示框 -->
        <el-dialog
            id="tosureDelete"
            :visible.sync="deleteVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认要删除这个分组吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteVisible = false">取 消</el-button>
                <el-button type="primary" @click="toDelete">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框结束 -->
        <!-- 导入提示框 -->
        <el-dialog
            id="tosureInclude"
            :visible.sync="includeVisible"
            width="80%"
            style="margin-top:15vh">
            <div class="chooseitems">
                <div class="chooseitem" v-for="(item,index) in collectLists" :key="index"><el-checkbox @change="getChooseInfo(item.id)">{{item.cname}}</el-checkbox></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="includeVisible = false">取 消</el-button>
                <el-button type="primary" @click="tosureInclude()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 导入提示框结束 -->
        <!-- 推荐提示框 -->
        <!-- <el-dialog
            id="tosureRecommend"
            :visible.sync="recommendVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认推荐吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="recommendVisible = false">取 消</el-button>
                <el-button type="primary" @click="toRecommendCard(rCardId,rUid)">确 定</el-button>
            </span>
        </el-dialog> -->
        <!-- 推荐提示框结束 -->
        <!-- 交换提示框 -->
        <el-dialog
            id="tosureExchange"
            :visible.sync="exchangeVisible"
            width="80%"
            style="margin-top:15vh">
            <el-radio-group v-model="exCardId">
                <div class="chooseitem" v-for="(item,index) in myCards" :key="index"><el-radio :label="item.id" @change="getExInfo(item.id)">{{item.cname}}</el-radio></div>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exchangeVisible = false">取 消</el-button>
                <el-button type="primary" @click="toExchangeCard">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 交换提示框结束 -->
        <!-- 取消收藏提示框 -->
        <el-dialog
            id="tosureRemoveCollect"
            :visible.sync="removeVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认取消收藏吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="removeVisible = false">取 消</el-button>
                <el-button type="primary" @click="toRemoveCard(rCardId,rUid)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 取消收藏提示框结束 -->
    </div>
</template>

<script>
import {collectTerm,collectList,createTerm,deleteTerm,toIncludeTerm,recommendCard,removeCard,isCreateCard,exchangeCard} from '../../../../js/dataServe.js'
import {baseUrl} from '../../../../config/env'
export default {
    data(){
        return {
            termItems:'',//动态的每组下面的收藏列表
            inputval:'',
            exchangeVisible:false,
            removeVisible:false,
            recommendVisible:false,
            includeVisible:false,
            deleteVisible:false,
            dialogVisible:false,
            grouplists:[],
            baseUrl:{baseUrl},
            deleteVal:'',
            collectLists:[],
            chooseArr:[],
            includeTermId:'',//要导入的分组id
            includeTermIndex:'',//要导入的分组索引
            rCardId:'',//推荐名帖id
            rUid:'',//推荐人uid
            removeCard:'',//取消收藏的名帖
            myCards:'',//我的所有名帖
            exCardId:'',//要交换的名帖id
            beExUid:'',//被交换uid
            beExCardId:''//被交换的名帖id
        }
    },
    components:{},
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
        this.getGroupList();
    },
    methods:{
        //获取分组列表
        getGroupList(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = collectTerm();
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let  items = res.data.list;
                                                items.forEach( (item,key) => {
                                                    if(item.uid == sessionStorage.uid){
                                                        item.termLists = [];
                                                        // this.grouplists = [];
                                                        self.grouplists.push(item)
                                                        // console.log(self.grouplists)
                                                        self.getTermList(item)
                                                    }
                                                })
                                            }
                                        })
            }
        },
        //获取每组下面的列表
        getTermList(list){
            if(sessionStorage.sid){
                let self = this;
                let responseData = collectList();
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let items = res.data.list;
                                                items.forEach( (item,key) => {
                                                    if(item.igroupid == list.id){
                                                        list.termLists.push(item)
                                                    }
                                                })
                                            }
                                        })
            }
        },
        //创建分组
        toCreateGroup(){
            if(sessionStorage.sid){
                let self = this;
                if(self.inputval.length<=0){
                    alert('请输入分组名称先！');
                    return false;
                }
                let responseData = createTerm(self.inputval);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                self.dialogVisible = false;
                                                self.grouplists.push(res.data)
                                            }
                                        })
            }
        },
        //删除分组前
        beforeDel(item){
            this.deleteVisible = true;
            this.deleteVal = item;//要删除的值
        },
        //删除分组
        toDelete(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = deleteTerm(self.deleteVal.id);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let index = self.grouplists.indexOf(self.deleteVal);
                                                self.grouplists.splice(index,1)
                                                self.deleteVisible = false;
                                            }else{
                                                alert(decodeURIComponent(res.msg))
                                            }
                                        })
            }
        },
        //获取所有收藏列表
        getCollectList(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = collectList();
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let items = res.data.list;
                                                items.forEach( (item,key) => {
                                                    if(item.uid == sessionStorage.uid){
                                                        this.collectLists.push(item)
                                                    }
                                                })
                                            }
                                        })
            }
        },
        //获取选中的名帖
        getChooseInfo(id){
            let index = this.chooseArr.indexOf(id);
            if(index<0){
                this.chooseArr.push(id)
            }else{
                this.chooseArr.splice(index,1)
            }
        },
        //导入前
        beforeInc(id,index){
            this.includeTermIndex = index;
            this.includeTermId = id;
            this.includeVisible = true;
            if(!this.collectLists.length>0){
                this.getCollectList();
            }
        },
        //导入
        tosureInclude(){
            if(sessionStorage.sid){
                let dataStr = '';
                let self = this;
                self.chooseArr.forEach( (item,key) =>{
                    dataStr += 'ids=' + item + '&';
                })
                if(dataStr !== ''){
                    let delstr = dataStr.substr(0,4);
                    dataStr = dataStr.replace(delstr,"");
                    dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
                }
                let responseData = toIncludeTerm(self.includeTermId,dataStr);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                self.grouplists = [];
                                                self.getGroupList();
                                                self.includeVisible = false;
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'success'
                                                })
                                            }
                                        })
            }
        },
        //推荐前
        beforeRec(icardid){
            this.$router.push({path:'/mine/toRecList',query:{icardid:icardid}})
        },
       
        //取消前
        beforeRem(list,termItems){
            this.removeVisible = true;
            this.removeCard = list;
            this.termItems = termItems;
        },
        //取消收藏
        toRemoveCard(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = removeCard(self.removeCard.id);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let index = self.termItems.indexOf(self.removeCard);
                                                self.termItems.splice(index,1)
                                                self.removeVisible = false;
                                                self.$message({
                                                    duration: 2000,
                                                    message: '取消成功',
                                                    type: 'success'
                                                })
                                            }else{
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'error'
                                                })
                                            }
                                        })
            }
        },
        //获取我要交换的名帖id
        getExInfo(id){
            this.exCardId = id;
        },
        //获取我的名帖列表
        getMyCards(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = isCreateCard();
                responseData.then((res)=>{
                                            // console.log(decodeURIComponent(res.msg))
                                            if(res.result == 1){
                                                this.myCards = res.data;
                                            }
                                        })
            }
        },
        //交换前
        beforeEx(beid,beuid){
            this.exchangeVisible = true;
            this.getMyCards();
            this.beExCardId = beid;
            this.beExUid = beuid;
        },
        //交换
        toExchangeCard(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = exchangeCard(self.exCardId,self.beExUid,self.beExCardId);
                responseData.then((res)=>{
                                            // console.log(decodeURIComponent(res.msg))
                                            if(res.result == 1){
                                                this.exchangeVisible = false;
                                                self.$message({
                                                    duration: 2000,
                                                    message: '待对方确认',
                                                    type: 'success'
                                                })
                                            }else{
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'error'
                                                })
                                            }
                                        })
            }
        }
    }
}
</script>

<style scoped >
#collectTerm {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    position:relative;
    margin-top:6rem;
}
.listcontent{
    margin-bottom:3rem;
}
.list{
    position:relative;
    border-bottom: 1px solid #ffffff;
}
.listdetail{
    position:relative;
    padding:0 1rem;
}
.el-collapse{
    border-top:none;
}
.el-collapse-item__header{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.receiveitem{
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
}
.userinfo{
    display:flex;
    width: 100%;
    justify-content: space-between;
}
.receiveitem i{
    width:4rem;
    height:4rem;
    display:block;
}
.receiveitem p{
    height:4rem;
    display:flex;
    padding-left: 1rem;
    align-items:center;
    justify-content: center;
    box-sizing:border-box;
}
.cardinfo p{
    width:5rem;
}
.receiveitem i img{
    width:100%;
    height:100%;
    border-radius:5rem;
}
.operate{
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    background:#ebeef5;
}
.operate p{
    text-align:left;
}
.operateP{
    display:flex;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    right: 4rem;
    height: 3rem;
    align-items: center;
}
.operateDetail{
    display:flex;
    flex-direction:column;
    padding-left:1rem;
}
.operateDetail i,.operateDetail span{
    height: 1.2rem;
    line-height: 1.2rem;
}
.el-icon-arrow-right{
    position:absolute;
    right:1rem;
}
.is-active{
    background:#ebeef5;
}
.tjs,.cardinfo{
    display:flex;
}
.tjs p{
    padding:0;
}
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    height: 3rem;
    line-height: 3rem;
    background: #606266;
}
.bgr{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    background: #ebeef5;
}
.chooseitem{
    display: flex;
    padding-left: 2rem;
}
.el-radio-group,.chooseitems{
    width:100%;
    height:6rem;
    overflow:auto;
}
</style>
